<!--
  Generated template for the FreeclassroomPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar color="primary">
    <ion-title>空闲教室预览</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <div *ngIf="showQueryCtritieria">
    <ion-list>
      <ion-item>
        <ion-label>开始时间</ion-label>
        <ion-datetime doneText="确定" cancelText="取消" displayFormat="YYYY-MM-DD HH:mm" [(ngModel)]="startdate">
        </ion-datetime>
      </ion-item>


      <ion-item>
        <ion-label>结束时间</ion-label>
        <ion-datetime doneText="确定" cancelText="取消" displayFormat="YYYY-MM-DD HH:mm" [(ngModel)]="enddate">
        </ion-datetime>
      </ion-item>

      <ion-item>
        <ion-label>教室编号</ion-label>
        <ion-input type="text" [(ngModel)]="classroomno"></ion-input>
      </ion-item>
    </ion-list>

    <button ion-button block (click)="query()">
      查询
    </button>
  </div>

  <div *ngIf="!showQueryCtritieria" text-center style="width: 100%;height: 25px;"
    (click)="showQueryCtritieria=!showQueryCtritieria">
    <ion-icon style="font-size: 25px;color:blue;" name="menu"></ion-icon>
  </div>


  <ion-list *ngIf="freeClassRooms!=null && freeClassRooms.length >0; else elseTemplate">
    <ion-item *ngFor="let classroom  of freeClassRooms" detail-push (click)="book(classroom.classroomno)">
      {{classroom.classroomno}}
    </ion-item>
  </ion-list>
  <ng-template #elseTemplate>
    <div style="text-align: center;font-size: 30px;color: red;margin-top: 100px;">
      没有可预订的教室
    </div>
  </ng-template>


</ion-content>
